He recibido varias peticiones sobre menús horizontales, ya hablamos sobre el clásico menú horizontal y sobre el menú desplegable
Esta vez es algo diferente, un generador de menús, la forma de crearlo es muy sencilla para ello accederemos a CSS MENU MAKER encontraremos a la izquierda menús horizontales y a la derecha verticales.
Escogemos el que mejor se adapte nuestro blog.
Una vez decididos...
Clicamos en Customize
Agregamos el número de temas que harán de enlace para en el menú y clicamos en Submit
Llenamos los campos requeridos para el título y agregamos a la derecha la url del lugar que vamos a enlazar. Clicamos de nuevo en SubmitA continuación nos proporciona dos códigos copiaremos el segundo que dice:
CSS Code y nos situaremos en plantilla Edición html
Justo antes de ]]></b:skin> lo pegaremos.
Luego copiaremos donde dice HTML Code nos situaremos en Plantilla/Añadir un elemento de página/HTML/Javascript para añadir lo siguiente:
CSS Code y nos situaremos en plantilla Edición html
Justo antes de ]]></b:skin> lo pegaremos.
Luego copiaremos donde dice HTML Code nos situaremos en Plantilla/Añadir un elemento de página/HTML/Javascript para añadir lo siguiente:
<ul id='menu'>
<li ><a href='url del enlace'>Título del enlace </a></li>
<li ><a href='url del enlace'>Título del enlace </a></li>
<li ><a href='url del enlace'>Título del enlace </a></li>
<li ><a href='url del enlace'>Título del enlace </a></li>
</ul>
<li ><a href='url del enlace'>Título del enlace </a></li>
<li ><a href='url del enlace'>Título del enlace </a></li>
<li ><a href='url del enlace'>Título del enlace </a></li>
<li ><a href='url del enlace'>Título del enlace </a></li>
</ul>
Guardamos los cambios y arrastramos esa etiqueta hasta el lugar deseado. Volveremos de nuevo al lugar donde copiamos los códigos para la plantilla y el elemento de página y descargaremos donde dice "Click here to download Image files" se trata de un archivo zip con las imágenes del menú.
Abriremos la carpeta "images" y extraeremos las imágenes en formato gif. que más tarde alojaremos en un servidor para conseguir la url de las imágenes.
Esa url la debemos pegar en el código que agregamos a la CSS de nuestra plantilla.
Viene detallado donde agregarla, deberéis buscar donde dice algo así como: background:transparent url("images/nombre-de-la-imagen.gif") .......
Abriremos la carpeta "images" y extraeremos las imágenes en formato gif. que más tarde alojaremos en un servidor para conseguir la url de las imágenes.
Esa url la debemos pegar en el código que agregamos a la CSS de nuestra plantilla.
Viene detallado donde agregarla, deberéis buscar donde dice algo así como: background:transparent url("images/nombre-de-la-imagen.gif") .......
Gracias JmpaSrgc por el detalle, hacía tiempo que un generador no me hacia tanta ilusión.
Vaya, con que rapidez has investigado lo que te envié. Se nota que le pones todas tus ganas.
Un saludo ;)
(El detalle es tuyo)
Bueno gemma,la verdad que nunca dejas de sorprenderme,increiblemente e visto tu comentario en mi blog y me as dejado voquiabierto,lo primero por esa inquietud tan unica que tienes por hacer las cosas bien echas o sencillamente enseñarnos algo en cada momento,sinceramente no esperaba una visita tuya por el blog.
Unicamente queria darte las gracias una vez mas por comentarme lo que me comentas sobre los bordes de las imagenes,ciertamente era algo que tenia que eliminar pero quizas otras cosas an ido surgiendome y no le daba la minima importancia,pero poniendomelo tan bien no e dudado en hacerlo directamente y me a sorprendido lo bien que queda sin esa linea.
No tengo palabras,GRACIAS GEMMA.
Por cierto gemma si te apetece pasate por mi blog de pruebas que vi una cosilla para ti,espero que te valga,GRACIAS.
el blog es http://elmokoexperimentando.blogspot.com/
Hola Gem@, quiero hacerme un blog de pruebas y quria que tuviera tres columnas, como lo puedo hacer.
El blog es:
Name: Minima
Designer: Douglas Bowman
Gracias besicos
Perdona que este otra vez aki dandote la chapa gemma,pero no me percate de que no podias copiar el codigo por que lo habia usado como prueba antes de ponertelo,ya e desabilitado la opcion y puedes copiarlo y cogerlo es todo tuyo.
Perdona por las molestias y gracias gemma por tu amabilidad constante.
^_º
JmpaSrgc sabes que me gusta probar estas cosas ;)
!Gracias¡
TXOKY a veces no sé si dar mi opinión sobre algo que no me la han pedido, pero siempre pienso que a lo mejor el autor del blog no se ha percatado de un posible error o como en tu caso de algo que era tan sencillo de solucionar.
Gracias por ese detalle que has tenido, y no te preocupes, me lo llevé sigilosamente pero te diste cuenta jajajaja
No te disculpes por favor estás en tu casa puedes venir y comentar las veces que te plazcan :)
Hola Paqui hice esta entrada pensando en ti :)
Hola por primera vez Gema:
A mi me interesaría añadir un menú como el que pones, pero en desplegable, de forma que en cada nivel pueda tener opción a varios links. Entro en la web css menu maker, pero no veo la opción. ¿Puedes decirme algo?
Gracias
(por cierto, he puesto un link en mi blog hacia el tuyo con uno de tus botones: http://elcajondelbatanero.blogspot.com
Será un honor que le eches un vistazo y me des tu opinión
Saludos
Bienvenido Batanero precisamente la semana pasada añadí un menú despegable:
http://gemablog-.blogspot.com/2007/09/men-horizontal-despegable.html
Suerte ;)
Gema . la verdad muy buen blog!!
Bueno queria preguntarte algo sobre este Menu Maker , lo inserte en mi blog , pero me queda corto de los costados , me gustaria saber como agrandarla para que queden con el margen del Blog.
Mi blog es http://modasl.blogspot.com/.
Muchas gracias y muy buen blog!
Saludos Complex Mind el tamaño se modifica en el archivo zip que descargamos y agregamos a nuestra plantilla.
Busca donde dice:ul#menu y un poco más abajo donde dice:
width:auto; puedes modificar el tamaño.
Por ejemplo en tu blog he visto que el espacio de las entradas es de width: 400px;
Intenta entonces añadir lo mismo.
Sustituye width:auto; por width: 400px;
Mira el efecto en vista previa, ya me dirás que tal resulta ;)
Gracias gema , pero lo que me has dicho solo se amolda al tamaño de las entradas , eh probado aumentarle a 600px , para que quede todo el largo (loque yo quiero es que kede en todo el largo , incluyendo entradas y sidebar) y tmb quiero que quede justo por debajo del Header , no kiero que queden espacios a las costados ni arriba, que sean blancos...
Desde ya mucihas gracias
Hola Gema!
La verdad es que llevo poco tiempo con esto de los blogs, aún no sé muy bien para qué sirven y por qué me decidí a realizar uno, más que nada para aprender a hacer cosas...
El caso es que buscando, buscando llegué a tu blog y explicas muchas, muchas cosas que algunas estoy intentando añadir a mi blog.
Por ejemplo esta de los menús. He escogido uno pero no me sale que al seleccionar un apartado de ese menú me lleve a donde yo quiero...
No sé si me podrás ayudar, gracias de antemano.
Mi blog es http://mensajesdehumo-dac.blogspot.com
MUCHAS GRACIAS POR LA PUBLICACION EL CSS MAKER REALMENTE ME FUE MUY UTIL Y YA LO INSTALE EN MI BLOG ,PERO HAY ALGO QUE QUISIOERA CONSULTARTE ......
¿HAY ALGUNA FORMA DE QUE EL MENU QUEDE PEGADO A LA CABECERA?
NO ME QUIERO ARRIESGAR CON MI PLANTILLA.
TE LO AGRADECERIA MUCHO POR CIERTO VOY A LINKEARTE EN MI BLOG
Complex Mind siento ver tu comentario pasado tanto tiempo.
Mi respuesta era que añadieras un nuevo elemento de página creado en el header del blog, eso haría que apareciera justo debajo del logo.
Anónimo para que te lleve donde quieres (no sea un enlace roto) debes llenar los campos requeridos de texto y url de enlces antes de generar el código del menú (es el paso siguiente donde elegimos la cantidad de botones de nuestro menú) En esta entrada añadí una imagen de muestra de como hacerlo justo después donde dice:
"Agregamos el número de temas que harán de enlace para en el menú y clicamos en Submit"
Los datos que ingresas en esa parte van incluidos en el código que después se genera, no debes volver a modificarlos.
Si que la hay carajete y es añadiendo un elemento de página nuevo justo debajo de la cabecera en el header. En ese nuevo elemento añadiremos el código en: Añadir un elemento de página/HTML/Javascript.
(Como si lo hicieramos en la sidebar pero en el header)
No sé que plantilla estás usando pero puedes guiarte para añadir un nuevo elemento aquí.
De todas formas te diré algo, es recomendable crear un blog para nuestras pruebas y "experimentos" tendrás fácil acceso a él sin salir de Blogger y nos ayuda a ver los resultados y modificarlos sin arriesgarse.
Si te queda alguna duda házmelo saber ;)
Me costó horrores, pero finalmente la pude instalar. Gracias de nuevo por la ayuda.
Saludos!
MAGNÍFICO te ha costado horrores pero te ha quedado genial.
!Me gusta¡ ;)
hola gema! esto es excelente pero no logro encontrar esta parte del codigo en mi plantilla b:skin> que puedo hacer?
Totattm encontrarás b:skin> antes de </head>
hola estoy empezando en esto de los blogs y he visitado varios buscando ayuda pero definitivamente me quedo con vos. gracias mujer por los consejos y herramientas que nos das a muchos que como yo andamos perdidos en los códigos HTML
milllllllll abrazos Texto
Flores literarias miles y miles de gracias por el comentario, espero poder ayudarte cuando lo requieras ;)
yo soy una torpe completa y de mil cosas que explicas y encuentro solo hago una bien jajaja soy un caso perdido pero seguiré paso a paso tus consejos... gracias a vos por hacer lo que haces
El secreto está en olvidar las prisas, ir paso a paso y no tener miedo a probar una y otra vez ;)
Mi pregunta es sobre los menus pero no exactamente de este generador,yo quiero colocar un menu como el de http://www.nue-media.com/ no exactamente igual pero de ese estilo y realmente no tengo ni idea de como hacerlo y ya que estoy preguntando, sabras si en blogger se puede hacer ese mismo efecto que tiene dicha web,que cada ves que entras tiene un color distinto? desde ya muchas gracias
P4BLQ me muestras una página que conocí hace tiempo y por estas cosas perdí su dirección así que te lo agradezco.
En fin a lo que me preguntabas, el menú es un menú muy especial porque como bien dices cambia de color al actualizar la página creo que podría hacerse con las indicaciones de esta entrada Visionar el color de fondo en un color diferente sólo que en lugar de añadir distinto color de fondo sería distinto color para el efecto hover del menú.
Al igual que con el menú se podría hacer también con el logo, con el calendario y con cualquier cosa que podamos incluir en la css.
Si haces algo ya me avisas que lo vea ;)
Claro yo te aviso pero lo de los colores es secundario, mi interes principal es colocar en uno de mis blog un menu que al posarme sobre "home" se cambie la imagen de fondo(exactamente como en la web que antes mencione) ya que el que yo tengo solo se subraya la palabra,espero comprendas a que me refiero
P4BLQ ese efecto se consigue con dos imágenes o dos colores distintos, en tu caso sería dos imágenes.
Tienes en:#header #header-menu ul li una imagen, tendrías que añadir otra imagen del mismo tamaño y color distinto en:
#header #header-menu ul li a:hover {
L oque harías entonces sería eliminar:
text-decoration: underline;
Y añadir:
float: left;
height: 26px;
font: normal 13px Verdana;
color: #000000;
margin-right: 5px;
padding: 2px 20px 0 20px;
background: url("aquí la nueva url de la imagen") repeat-x;
}
Quedaría así:
#header #header-menu ul li a:hover {
float: left;
height: 26px;
font: normal 13px Verdana;
color: #000000;
margin-right: 5px;
padding: 2px 20px 0 20px;
background: url("aquí la nueva url de la imagen") repeat-x;
}
ya logre el efecto que queria, ahora queria saber si me puedes ayudar con unos arreglos que le quiero hacer al blog como,deslizamiento del favicon,colocar la fecha de cada post en un calendario hacer que el icono de "ir arrib" se mueva como en nue(me)dia,colocar la sidebar de la izquierda a la derecha y configurar para que la sidebar y la zona de los post queden de 1024 y no de 800x600 como lo estan ahora.
Espero entiendas a que me refiero con cambiar la configuracion, este es el blog que modifique para que lo veas y me comentes que te parecio
Tengo otros problemitas que adosar a los anteriores,sobre el menu aparese mi nick he tratado de quitarlo pero no lo he logrado,tambien he probado agregar un buscador interno yo tengo un codigo que ya huso en otro blog y no he podido colocarlo en la parte superior derecha del blog,logre colocarlo sobre el menu pero me baja este mismo,pensaba mostrarte el codigo pero no me dejaba postear comentarios con el codigo.
Espero no estar siendo muy molesto,gracias por la ayuda que me has dado
P4BLQ eso no son problemitas, es modificar el blog y debe hacerse paso a paso porque surgen dudas, errores, preguntas y es un descontrol.
Todas esas cosas las puedes encontrar en sus entradas correspondientes donde lo verás con más claridad que la respuesta en un comentario.
Usa el buscador con palabras clave verás como te lleva a cada tema ;)
El favicon por ejemplo lo puedes ver aquí:
Favicon
La fecha aquí:
Fecha
Si no quieres usar el buscador puedes mirar en "Contenido del menú" ahí están todas las entradas del blog ;)
Gracias me olvide de comentar aqui que gran parte de los "problemitas" como yo dije ya los he solucionado husando el buscador solo me faltan los que me enlasastes y el buscador,por sierto el truco de la fecha no me agrada el terminado que tiene yo quiero algo mas como una imagen y no solo un fondo de color detras de la fecha,pero todos los blogs de ayuda dan el mismo efecto,otra cosa creo que algo hise mal ya que me a quedado una linea que atraviesa el blog que podre haber hecho mal?,bueno muchas gracias por tu ayuda y perdona las molestias
Hola P4BLQ en Vagabundia vi como añadir imágenes al calendario Fecha en los post
Más cosas... la línea que atraviesa el blog ¡no la veo!! dime donde la ves para que sepa donde está ;)
Me olvidaba el buscador interno..Buscador
La linea esta en este blog [url]http://www.p4blqg.blogspot.com[/url] justo debajo del video
Pues nada, que no la veo, y he mirado con Explorer y Firefox si quieres mándame una captura y la señalas, porque las únicas líneas que veo es la imagen que hay en los títulos de las entradas :(
Pues yo la veo en firefox y safari (windows) y la imagen alli esta,ni bien tenga un poco de tiempo te subo la imagen mostrando donde esta; no entendi casi nada de como colocar una imagen en la fecha del post y el buscador ya no lo colocare por que aun no he encontrado forma de colocarlo y que no se baje el menu de donde esta
AQUI TE DEJO LA IMAGEN [IMG]http://i486.photobucket.com/albums/rr227/p4blq/LINEA.png[/IMG]
Yo no veo ninguna línea mira esta captura:
Captura
¿Qué navegador usas?
Para editar la plantilla firefox,para todo lo demas safari,aunque yo veo la linea en la captura tuya :S
Creo que es el limite de la imagen que coloque de fondo
He cambiado la direccion del blog ahora es pablorizia.blogspot.com
No puedo verla con esa url Pablo, pero si piensas que esa línea es la imagen de fondo (te felicito por la vista que tienes) entonces añade la imagen de esta forma:
background:#000 url('aquí pones la url') repeat-x fixed;
Veremos si es eso ;)
Coloque la imagen de esa forma y lo que hace es dejar la imagen fija de fondo,eso es lo que buscaba para otro blog y te agradesco el que me lo hayas pasado, pero para este blog no me sirve, la linea es de 1 px y rodea toda la imagen de fondo,se me ocurrio de pasarte la plantilla por e-mail para que tu la pruebes a ver si encuentras algo,pero no se como dices que no ves la linea seria lo mismo creo yo,no si te parese bien te la envio ok?
Pablo, con fixed fijamos el fondo pero puedes eliminarlo, si dejas repeat-x la imagen se expande de arriba abajo que es el problema que tienes que la imagen termina y no ocupa todo el fondo.
Ahora mismo tengo varias plantillas para ver problemas, intenta eso que te digo y si no lo soluciona entonces me la mandas ;)
No es un problema mi idea es que la imagen quede tal cual esta,lo que si es preoblema es esa linea que enmarca donde termina la imagen que antes no estaba,he buscado en todo el codigo de la plantilla y no encuentro nada,ahora con el post nuevo que acabo de hacer se nota mucho mas,te pasare el codigo o el archibo de la plantilla para ver si tu encuentras algo por que yo ya agote todos mis recursos
De acuerdo Pablo ;)
Hola gema, acabo de enviarte un mail con una copia de mi plantilla espero la recivas, mi cuenta es jporizia el resto no hace falta decirlo
Gema queria saber si te llego el mail que te envie hace 10 dias?
Llevas razón Pablo hace diez días de tu correo, pero el tiempo no me da para más lo siento.
Mañana sin falta crearé la entrada sobre el tema de la sidebar superior, lo demás habrás que ir viéndolo poco a poco.
Te envío un correo Pablo ;)
Hola gema, yo agregue un menu de esta pagina (www.cssmenumaker.com) pero resulta que se ve bien solo en internet explorer, en cambio en firefox, chrome, etc... se ve mal. Es como que los "botones" se van para abajo y se separan entre si. Estube mirando el codigo del menu_style.css pero no encuentro ningun error. Agradecería infinitamente tu ayuda. Saludos Gema!!
La pagina es www.nahbur.com.ar
Hola! gem@! justamente tenia una duda y de la misma pagina que lei que charlaban de http://www.nue-media.com/ Yo queria ver si podia instalar este menu en un blog que estoy haciendo, pero no encuentro manera de poder hacerlo, hay manera de poder instalar un menu como el que usa la pagina? Me refiero al menu principal.
Saludos!!
:: Bilosony2™ imagino que poder puede hacerse pero hay que crear las imágenes porque funciona con sprites un tema que no he tocado todavía.
En esa url verás a lo que me refiero:
http://www.nue-media.com/wp-content/themes/v2/themes/cityscape/images/nav.png
Nota: solo los miembros de este blog pueden publicar comentarios.